<template>
  <div class="home">
    <!-- Hero Banner轮播 -->
    <section class="banner-section">
      <div class="container">
        <el-carousel height="500px" :interval="5000" arrow="hover">
          <el-carousel-item v-for="banner in homeData.banners" :key="banner.id">
            <div class="banner-item">
              <img :src="banner.image_url" :alt="banner.title" class="banner-img-full" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>

    <!-- 服务优势 -->
    <section class="advantages-section">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">为什么选择我们？</h2>
        <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
          专业技术团队，为您提供一站式解决方案
        </p>
        
        <div class="advantages-grid">
          <div 
            v-for="(advantage, index) in advantages" 
            :key="index"
            class="advantage-card"
            data-aos="zoom-in"
            :data-aos-delay="index * 100"
          >
            <div class="advantage-icon">
              <el-icon :size="48" :color="advantage.color">
                <component :is="advantage.icon" />
              </el-icon>
            </div>
            <h3 class="advantage-title">{{ advantage.title }}</h3>
            <p class="advantage-desc">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心服务 -->
    <section class="services-section">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">我们的服务</h2>
        <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
          提供全方位的技术支持和专业服务
        </p>
        
        <el-tabs v-model="activeService" class="service-tabs" @tab-change="handleServiceChange">
          <el-tab-pane 
            v-for="service in services" 
            :key="service.name"
            :label="service.name" 
            :name="service.name"
          >
            <div class="service-content">
              <div class="service-info" data-aos="fade-right">
                <h3>{{ service.title }}</h3>
                <p class="service-subtitle">{{ service.subtitle }}</p>
                <ul class="service-features">
                  <li v-for="(feature, idx) in service.features" :key="idx">
                    <el-icon color="#0066ff"><Check /></el-icon>
                    <span>{{ feature }}</span>
                  </li>
                </ul>
              </div>
              <div class="service-image" data-aos="fade-left">
                <img :src="service.image" :alt="service.name" />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>

    <!-- 产品展示 -->
    <section class="products-section" ref="productsSection">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">核心产品</h2>
        <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
          为企业提供专业的技术解决方案
        </p>
        
        <div class="products-grid">
          <div
            v-for="(product, index) in homeData.products"
            :key="product.id"
            class="product-card"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
            @click="$router.push(`/products/${product.id}`)"
          >
            <div class="product-image">
              <img v-if="product.cover_image" :src="product.cover_image" :alt="product.name" />
            </div>
            <div class="product-content">
              <h3>{{ product.name }}</h3>
              <p>{{ product.summary }}</p>
              <div class="product-link">
                查看详情 <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据统计 -->
    <section class="stats-section">
      <div class="container">
        <div class="stats-grid">
          <div 
            v-for="(stat, index) in stats" 
            :key="index"
            class="stat-card"
            data-aos="flip-up"
            :data-aos-delay="index * 100"
          >
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 客户评价 -->
    <section class="testimonials-section">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">客户评价</h2>
        <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
          听听我们客户的真实反馈
        </p>
        
        <div class="testimonials-grid">
          <div 
            v-for="(testimonial, index) in testimonials" 
            :key="index"
            class="testimonial-card"
            data-aos="zoom-in"
            :data-aos-delay="index * 100"
          >
            <div class="testimonial-quote">
              <el-icon :size="32" color="#0066ff"><ChatDotRound /></el-icon>
            </div>
            <p class="testimonial-content">{{ testimonial.content }}</p>
            <div class="testimonial-author">
              <div class="author-info">
                <strong>{{ testimonial.name }}</strong>
                <span>{{ testimonial.position }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻资讯 -->
    <section class="news-section">
      <div class="container">
        <h2 class="section-title" data-aos="fade-up">新闻资讯</h2>
        <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
          了解最新的行业动态和公司新闻
        </p>
        
        <div class="news-grid">
          <div
            v-for="(news, index) in homeData.news"
            :key="news.id"
            class="news-card"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
            @click="$router.push(`/news/${news.id}`)"
          >
            <div class="news-image">
              <img v-if="news.cover_image" :src="news.cover_image" :alt="news.title" />
            </div>
            <div class="news-content">
              <h3>{{ news.title }}</h3>
              <p>{{ news.summary }}</p>
              <div class="news-meta">
                <span><el-icon><Calendar /></el-icon> {{ news.publish_time?.split('T')[0] }}</span>
                <span><el-icon><View /></el-icon> {{ news.view_count }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 浮动联系方式 -->
    <div class="floating-contact">
      <el-tooltip content="微信咨询" placement="left">
        <div class="contact-item" @click="showWechat = true">
          <el-icon :size="24"><ChatLineRound /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip content="电话咨询" placement="left">
        <div class="contact-item">
          <el-icon :size="24"><Phone /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip content="返回顶部" placement="left">
        <div class="contact-item" @click="scrollToTop">
          <el-icon :size="24"><Top /></el-icon>
        </div>
      </el-tooltip>
    </div>

    <!-- 联系表单弹窗 -->
    <el-dialog 
      v-model="showContactDialog" 
      title="免费咨询" 
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="contactForm" :rules="contactRules" ref="contactFormRef" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="contactForm.name" placeholder="请输入您的姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="contactForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="公司" prop="company">
          <el-input v-model="contactForm.company" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="需求" prop="message">
          <el-input 
            v-model="contactForm.message" 
            type="textarea" 
            :rows="4"
            placeholder="请简要描述您的需求"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showContactDialog = false">取消</el-button>
        <el-button type="primary" @click="submitContact">提交</el-button>
      </template>
    </el-dialog>

    <!-- 微信二维码弹窗 -->
    <el-dialog v-model="showWechat" title="微信咨询" width="350px" align-center>
      <div class="wechat-qrcode">
        <div class="qrcode-placeholder">
          <el-icon :size="100" color="#07c160"><ChatLineRound /></el-icon>
          <p>扫描二维码添加微信</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { getHomeData } from '@/api/portal'
import type { HomeData } from '@/types'
import { 
  Star, 
  Trophy, 
  TrendCharts, 
  Lightning,
  Check,
  ArrowRight,
  ChatDotRound,
  ChatLineRound,
  Phone,
  Top,
  Calendar,
  View
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import AOS from 'aos'
import 'aos/dist/aos.css'

const homeData = reactive<HomeData>({
  banners: [],
  products: [],
  news: [],
  service_packages: [],
  custom_packages: [],
  package_features: [],
  faqs: []
})

const productsSection = ref()
const showContactDialog = ref(false)
const showWechat = ref(false)
const activeService = ref('技术咨询')
const contactFormRef = ref()

// 服务优势数据
const advantages = [
  {
    icon: Star,
    color: '#0066ff',
    title: '专业团队',
    description: '拥有多年行业经验的专业技术团队，为您提供最优质的服务'
  },
  {
    icon: Trophy,
    color: '#52c41a',
    title: '品质保证',
    description: '严格的质量管理体系，确保每个项目都达到最高标准'
  },
  {
    icon: TrendCharts,
    color: '#faad14',
    title: '持续创新',
    description: '紧跟技术发展趋势，不断创新优化，助力企业数字化转型'
  },
  {
    icon: Lightning,
    color: '#f5222d',
    title: '快速响应',
    description: '7x24小时在线支持，快速响应客户需求，解决各类问题'
  }
]

// 服务内容数据
const services = [
  {
    name: '技术咨询',
    title: '专业技术咨询服务',
    subtitle: '为企业提供全方位的技术咨询和解决方案',
    features: [
      '系统架构设计与优化',
      '技术选型与评估',
      '性能优化与调优',
      '安全防护与加固',
      '技术培训与指导'
    ],
    image: 'https://test-wins.oss-cn-hangzhou.aliyuncs.com/WinsImages/b876a34a3e27ec09dd7e2ce46b27b2e9.jpeg'
  },
  {
    name: '软件开发',
    title: '定制化软件开发',
    subtitle: '量身定制，满足企业个性化需求',
    features: [
      'Web应用开发',
      '移动应用开发',
      '企业级系统开发',
      '微服务架构实施',
      '持续集成与部署'
    ],
    image: 'https://test-wins.oss-cn-hangzhou.aliyuncs.com/WinsImages/384b58bdd24a580803abfba612617029.jpg'
  },
  {
    name: '运维支持',
    title: '全天候运维服务',
    subtitle: '保障系统稳定运行，让您无后顾之忧',
    features: [
      '系统监控与告警',
      '故障排查与恢复',
      '数据备份与恢复',
      '性能监控与优化',
      '安全加固与升级'
    ],
    image: 'https://test-wins.oss-cn-hangzhou.aliyuncs.com/WinsImages/wechat_2025-10-15_144114_185.png'
  }
]

// 数据统计
const stats = [
  { value: '7+', label: '年行业经验' },
  { value: '100+', label: '服务客户' },
  { value: '100+', label: '成功案例' },
  { value: '99%', label: '客户满意度' }
]

// 客户评价
const testimonials = [
  {
    content: '与WinsTech合作非常愉快，他们的技术团队专业高效，帮助我们顺利完成了系统升级，项目质量和进度都超出预期。',
    name: '张总',
    position: '某互联网公司CEO'
  },
  {
    content: '技术实力强，服务态度好，响应速度快。遇到问题能够及时解决，是值得信赖的技术合作伙伴。',
    name: '李经理',
    position: '某制造企业CTO'
  },
  {
    content: '从方案设计到项目实施，全程专业指导。系统上线后运行稳定，大大提升了我们的工作效率。',
    name: '王总监',
    position: '某金融公司IT总监'
  }
]

// 联系表单
const contactForm = reactive({
  name: '',
  phone: '',
  company: '',
  message: ''
})

const contactRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  message: [{ required: true, message: '请描述您的需求', trigger: 'blur' }]
}

const fetchData = async () => {
  try {
    const res = await getHomeData()
    Object.assign(homeData, res.data)
  } catch (error) {
    console.error('获取首页数据失败', error)
  }
}

const scrollToProducts = () => {
  productsSection.value?.scrollIntoView({ behavior: 'smooth' })
}

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const handleServiceChange = (name: string) => {
  console.log('切换服务:', name)
}

const submitContact = async () => {
  const valid = await contactFormRef.value?.validate()
  if (valid) {
    // 这里可以调用API提交表单
    ElMessage.success('提交成功，我们会尽快联系您！')
    showContactDialog.value = false
    Object.assign(contactForm, { name: '', phone: '', company: '', message: '' })
  }
}

onMounted(() => {
  fetchData()
  // 初始化AOS动画库
  AOS.init({
    duration: 800,
    once: true,
    offset: 100
  })
})
</script>

<style scoped lang="scss">
.home {
  padding-top: 70px;
}

// Banner样式
.banner-section {
  margin-top: -70px;
  padding-top: 70px;
  background: #fafafa;
  
  .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  :deep(.el-carousel) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  
  :deep(.el-carousel__item) {
    overflow: hidden;
  }
  
  // 美化左右箭头
  :deep(.el-carousel__arrow) {
    background: rgba(255, 255, 255, 0.9);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
    
    &:hover {
      background: #fff;
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
    
    .el-icon {
      font-size: 20px;
      color: #333;
      font-weight: bold;
    }
  }
  
  :deep(.el-carousel__arrow--left) {
    left: 20px;
  }
  
  :deep(.el-carousel__arrow--right) {
    right: 20px;
  }
  
  // 美化指示器
  :deep(.el-carousel__indicators) {
    bottom: 20px;
  }
  
  :deep(.el-carousel__indicator) {
    .el-carousel__button {
      width: 30px;
      height: 4px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.5);
      transition: all 0.3s;
    }
    
    &.is-active .el-carousel__button {
      background: #fff;
      width: 40px;
    }
  }
}

.banner-item {
  height: 500px;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.banner-img-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

// 通用Section样式
section {
  padding: 100px 0;
  
  &:nth-child(even) {
    background: #fafafa;
  }
}

// 服务优势
.advantages-section {
  background: #fff;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.advantage-card {
  text-align: center;
  padding: 40px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }
}

.advantage-icon {
  margin-bottom: 24px;
  display: inline-flex;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f0fe 100%);
  border-radius: 50%;
}

.advantage-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.advantage-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
}

// 服务内容
.services-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  
  .section-title,
  .section-subtitle {
    color: #fff;
  }
}

.service-tabs {
  margin-top: 60px;
  
  :deep(.el-tabs__header) {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px;
    border: none;
    overflow: visible;
  }
  
  :deep(.el-tabs__nav-wrap) {
    overflow: visible;
  }
  
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
  
  :deep(.el-tabs__nav) {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
  }
  
  :deep(.el-tabs__item) {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 0 !important;
    margin: 0 4px;
    border-radius: 50px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px;
    width: 130px;
    line-height: 1;
    box-sizing: border-box;
    text-align: center;
    
    &.is-active {
      background: #fff;
      color: #667eea;
    }
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  // 响应式调整
  @media (max-width: 768px) {
    :deep(.el-tabs__item) {
      padding: 0 !important;
      font-size: 14px;
      height: 40px;
      width: 110px;
      margin: 0 3px;
    }
  }
}

.service-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0;
}

.service-info {
  h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  
  .service-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
  }
}

.service-features {
  list-style: none;
  
  li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 16px;
    
    .el-icon {
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.2);
      padding: 4px;
      border-radius: 50%;
    }
  }
}

.service-image {
  img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  }
}

// 产品展示
.products-section {
  background: #fff;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.product-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    
    .product-image img {
      transform: scale(1.05);
    }
  }
}

.product-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f5f5f5;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
}

.product-content {
  padding: 24px;
  
  h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
  }
  
  p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.product-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-color);
  font-weight: 500;
  font-size: 14px;
}

// 数据统计
.stats-section {
  background: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%);
  padding: 80px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
}

.stat-card {
  text-align: center;
  color: #fff;
}

.stat-value {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 18px;
  opacity: 0.9;
}

// 客户评价
.testimonials-section {
  background: #fff;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.testimonial-card {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }
}

.testimonial-quote {
  margin-bottom: 20px;
}

.testimonial-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  
  strong {
    font-size: 16px;
    color: var(--text-primary);
  }
  
  span {
    font-size: 14px;
    color: var(--text-tertiary);
  }
}

// 新闻资讯
.news-section {
  background: #fafafa;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.news-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    
    .news-image img {
      transform: scale(1.05);
    }
  }
}

.news-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f5f5f5;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
}

.news-content {
  padding: 24px;
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.news-meta {
  display: flex;
  gap: 24px;
  color: var(--text-tertiary);
  font-size: 13px;
  
  span {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

// 浮动联系方式
.floating-contact {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.contact-item {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s;
  color: var(--primary-color);
  
  &:hover {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.4);
  }
}

// 微信二维码
.wechat-qrcode {
  padding: 20px;
  text-align: center;
}

.qrcode-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background: #f5f5f5;
  border-radius: 12px;
  
  p {
    font-size: 16px;
    color: var(--text-secondary);
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .service-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .banner-section {
    .container {
      padding-top: 30px;
      padding-bottom: 30px;
    }
    
    :deep(.el-carousel) {
      border-radius: 12px;
    }
    
    // 移动端箭头调整
    :deep(.el-carousel__arrow) {
      width: 40px;
      height: 40px;
      
      .el-icon {
        font-size: 16px;
      }
    }
    
    :deep(.el-carousel__arrow--left) {
      left: 10px;
    }
    
    :deep(.el-carousel__arrow--right) {
      right: 10px;
    }
    
    // 移动端指示器调整
    :deep(.el-carousel__indicators) {
      bottom: 15px;
    }
    
    :deep(.el-carousel__indicator) {
      .el-carousel__button {
        width: 24px;
        height: 3px;
      }
      
      &.is-active .el-carousel__button {
        width: 30px;
      }
    }
  }
  
  .banner-item {
    height: 350px;
  }
  
  section {
    padding: 60px 0;
  }
  
  .advantages-grid,
  .products-grid,
  .news-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  
  .stat-value {
    font-size: 36px;
  }
  
  .stat-label {
    font-size: 14px;
  }
  
  .floating-contact {
    right: 16px;
    bottom: 16px;
    gap: 8px;
  }
  
  .contact-item {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .banner-section {
    .container {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    
    :deep(.el-carousel) {
      border-radius: 8px;
    }
    
    // 小屏幕箭头调整
    :deep(.el-carousel__arrow) {
      width: 36px;
      height: 36px;
      
      .el-icon {
        font-size: 14px;
      }
    }
    
    :deep(.el-carousel__arrow--left) {
      left: 8px;
    }
    
    :deep(.el-carousel__arrow--right) {
      right: 8px;
    }
    
    // 小屏幕指示器调整
    :deep(.el-carousel__indicators) {
      bottom: 12px;
    }
    
    :deep(.el-carousel__indicator) {
      .el-carousel__button {
        width: 20px;
        height: 3px;
      }
      
      &.is-active .el-carousel__button {
        width: 26px;
      }
    }
  }
  
  .banner-item {
    height: 280px;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  .section-subtitle {
    font-size: 14px;
  }
}
</style>

